 {% extends 'common/panel.html' %}
{% block head %}
        <link rel="stylesheet" href="{{MEDIA_URL}}common/css/chart.css" type="text/css" media="all" title="no title" charset="utf-8"/>
{% endblock head %}
{% block title %}{{mpa.name}} Representation Report{% endblock title %}
{% block panel %}

    <div class="tabs">
        <ul>
            <li><a href="#Chart"><span>Chart</span></a></li>
            <li><a href="#DataTable"><span>Data Table</span></a></li>
        </ul>

        <div id="Chart">
            <h3>Zoning</h3>
            <div style="width:450px; overflow:hidden;" class="habitat_representation" id="zonedChart"></div>
            <h3>Current Conditions</h3>
            <div style="width:450px; overflow:hidden;" class="habitat_representation" id="originalChart"></div>
            <h3>Other Scenarios</h3>
            <div style="width:450px; overflow:hidden;" class="habitat_representation" id="scenariosChart"></div>
            <script type="text/javascript" charset="utf-8">
                var scenarios_data = JSON.parse('{ {% for stats in scenarios %}"{{stats.raster.full_name}}": {"sort": 1, "result":{{stats.avg}}, "units": "miles", "percent_of_total": {{stats.avg}}, "feature_map_id": 112, "org_scheme_id": 9},{% endfor %} }');
                var original_data = JSON.parse('{ {% for stats in original %}"{{stats.raster.full_name}}": {"sort": 1, "result":{{stats.avg}}, "units": "miles", "percent_of_total": {{stats.avg}}, "feature_map_id": 112, "org_scheme_id": 9},{% endfor %} }');
                var zoned_data = JSON.parse('{ {% for stats in zoned %}"{{stats.raster.full_name}}": {"sort": 1, "result":{{stats.avg}}, "units": "miles", "percent_of_total": {{stats.avg}}, "feature_map_id": 112, "org_scheme_id": 9},{% endfor %} }');
		lingcod.onShow('#Chart', function(ui){
            var report = zones.rasterReport($('#zonedChart'), zoned_data, true);
            var report = zones.rasterReport($('#originalChart'), original_data, true);
            var report = zones.rasterReport($('#scenariosChart'), scenarios_data, true);
            /* 
                var el = $('#ImpactsChart');
               if(report){
				$('#ImpactsChart').append(report.paper.canvas);
				report.update(hab_data, true);
			}else{
			    var report = zones.rasterReport($('#ImpactsChart'), hab_data, true);
			    if(!$.browser.msie){
				lingcod.persistentReports['Impacts'] = report;
			    }
			}					
            */
		});
            </script>
        </div>

   <div id="DataTable">
    <h3>Zoning</h3>
     <table width="100%" class="hab_repr_container">
     <tr><th>Scenario</th><th>Average</th><th>Min</th><th>Max</th> </tr>
  {% for stats in zoned %}
   {% if stats.pixels %}
     <tr class="{% cycle '' 'grey' %}">
	<td>{{stats.raster.full_name}}</td>
	<td>{{stats.avg|floatformat:"-3"}}</td>
	<td>{{stats.min|floatformat:"-3"}}</td>
	<td>{{stats.max|floatformat:"-3"}}</td>
     </tr>
   {% else %}
     <tr> <th>{{stats.raster.full_name}}</th><td colspan="7">Processing not complete.</td> </tr>
   {% endif %}
  {% endfor %}
     </table>

    <h3>Current Conditions</h3>
     <table width="100%" class="hab_repr_container">
     <tr><th>Scenario</th><th>Average</th><th>Min</th><th>Max</th> </tr>
  {% for stats in original %}
   {% if stats.pixels %}
     <tr class="{% cycle '' 'grey' %}">
	<td>{{stats.raster.full_name}}</td>
	<td>{{stats.avg|floatformat:"-3"}}</td>
	<td>{{stats.min|floatformat:"-3"}}</td>
	<td>{{stats.max|floatformat:"-3"}}</td>
     </tr>
   {% else %}
     <tr> <th>{{stats.raster.full_name}}</th><td colspan="7">Processing not complete.</td> </tr>
   {% endif %}
  {% endfor %}
     </table>

    <h3>Other Scenarios</h3>
     <table width="100%" class="hab_repr_container">
     <tr><th>Scenario</th><th>Average</th><th>Min</th><th>Max</th> </tr> 
  {% for stats in scenarios %}
   {% if stats.pixels %}
     <tr class="{% cycle '' 'grey' %}">
	<td>{{stats.raster.full_name}}</td>
	<td>{{stats.avg|floatformat:"-3"}}</td>
	<td>{{stats.min|floatformat:"-3"}}</td>
	<td>{{stats.max|floatformat:"-3"}}</td>
     </tr>
   {% else %}
     <tr>
          <th>{{stats.raster.full_name}}</th><td colspan="7">Processing not complete.</td>
     </tr>
   {% endif %}
  {% endfor %}
     </table>
   </div>


{% endblock panel %}
